<template>
	<view class="">
		<view class="">
			<view class="top-box">
				<view class="column1">
				    <view class="title">共情社区</view>
				    <view class="btn" v-if="isLogin">
				        <view @click="goTo('/pages/comB/community/upDate')"></view>
				        <view @click="goTo('/pages/comB/community/message')" :class="{on:messageCheck>0}"></view>
				        <view @click="goTo('/pages/comB/community/home')"></view>
				    </view>
				</view>
				<view class="column2" v-if="isLogin">
				    <view class="title">
				        <view class="title1">热门话题</view>
				        <view class="btn" @click="goTo('/pages/comB/community/topic')">全部话题</view>
				    </view>
				    <view class="con">
				        <view class="item" v-for="(item,index) in htList" :key="index" @click="goTo('/pages/comB/community/topicL?id=' + item.title)"><view class="clamp2">{{item.title}}</view></view>
				    </view>
				</view>
				<view class="tab clearC" v-if="isLogin">
				    <view :class="{hover:type==0}" class="fl" @click="changetype(0)"><view>精选</view></view>
				    <view :class="{hover:type==1}" class="fl" @click="changetype(1)"><view>关注</view></view>
				</view>
			</view>
			<view class="content" v-if="isLogin">
			    <view class="column3">
			        <view class="list" v-if="indexList.length>0">
			            <view class="item" v-for="(item,index) in indexList" :key="index" @click="goTo('/pages/comB/community/view?id=' + item.id)">
			                <view class="top" @click.stop="goTo('/pages/comB/community/home?id=' + item.user.id)">
			                    <view class="pic fl"><image :src="baseUrl + item.user.photo" mode=""></image></view>
			                    <view class="text">
			                        <view class="name">{{item.user.nickName}}</view>
			                        <view class="time"><text v-if="item.recommend==1">推荐</text>{{item.createTime}}</view>
			                    </view>
			                </view>
			                <view class="bot">
			                    <view class="textC clamp4">
			                        {{item.content}}
			                    </view>
			                    <view class="img">
			                        <view class="pic" v-for="(img,index2) in item.mulImg" :key="index2" v-if="index2<9" @click.stop="imgPreview(item.mulImg,img,index2)"><image :src="baseUrl + img" mode=""></image></view>
			                    </view>
			                    <view class="info">#{{item.topic}}</view>
			                    <view class="btn">
			                        <view :class="{on:item.isLike}" @click.stop="onLike(item.isLike,item.id,index)">{{item.likeCount}}</view>
			                        <view>{{item.replyCount}}</view>
			                    </view>
			                </view>
			            </view>
			        </view>
					<view class="" v-else style="padding-top: 150rpx;">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
			    </view>
				
			</view>
			<view class="" v-else style="padding-top: 200rpx;">
				<u-empty text="未登录账号" mode="permission">
					<view slot="bottom">
						<u-button size="mini" :plain="true" type="error" @click="toLogin">去登录</u-button>
					</view>
				</u-empty>
			</view>
		</view>
		
	</view>
</template>

<script>
    import config from '@/utils/config';
	export default {
		data() {
			return {
				htList:[],
                indexList:[],
                type:0,
                page:1,
                baseUrl:config.host1,
				isLogin:false,
                messageCheck:false
			};
		},
        onShow() {
            this.page=1
            this.indexList=[]
        	this.getList()
            this.getHot()
            this.getMessage()
			if(uni.$_getToken()){
				this.isLogin = true
			}
			uni.$_addAccess(this)
        },
        onLoad() {
        	
        },
        onReachBottom() {
            this.page=this.page+1
            this.getList()
        },
        methods:{
			//多张图片，可以左右滑动
			imgPreview(list,url,index) {
				let arr = []
				list.forEach((item, index) => {
					if (item) {
						let str = this.baseUrl +item
						arr.push(str)
					}
				})
				// let index = arr.findIndex(value => value == url)
				console.log(index)
				uni.previewImage({
					current: index,
					urls: arr,
				});
			},
			toLogin(){
				uni.redirectTo({
					url:'/pages/login/login?pathType=4'
				})
			},
            goTo(url){
                uni.$_navFn('to',url)
            },
            changetype(type){
                this.type=type
                this.page=1
                this.indexList=[]
                this.getList()
            },
            onLike(key,id,index){
                let that = this;
                let p = {
                    dynamicId:id
                }
                uni.$_post({
                    url: key?'cancel-like':'is-like',
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            that.indexList[index].isLike=!that.indexList[index].isLike
                            key?that.indexList[index].likeCount=that.indexList[index].likeCount-1:that.indexList[index].likeCount=that.indexList[index].likeCount+1
                        }
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
                
            },
            getHot(){
                let that = this;
                uni.$_get({
                	url: "index-hot",
                	that: that,
                	success(res) {
                		if(res.code == 0){
                			that.htList = res.data
                			console.log(that.htList,666)
                		}
                	},
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            getMessage(){
                let that = this;
                uni.$_get({
                	url: "is-message",
                	that: that,
                	success(res) {
                		if(res.code == 0){
                			that.messageCheck = res.data
                		}
                	},
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            getList() {
            	let that = this;
                let p = {
                    type:that.type,
                    pageNo:that.page,
                    pageSize:5
                }
                uni.$_post({
                    url: "index-list",
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            var list=[]
                            that.indexList.forEach(item => {
                                list.push(item)
                            })
                            res.data.records.forEach(item => {
                                list.push(item)
                            })
                            that.indexList = list
                            console.log(that.indexList,666)
                        }  
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
        }
	}
</script>

<style lang="scss" scoped>
	.top-box{
		margin-bottom: 10rpx;
		position: sticky;
		top: 0;
		width: 100%;
		padding: 120rpx 30rpx 30rpx;
		z-index: 999;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f3f3f3;
		 background: #fff url(@/static/img/index/indexTop2.png) no-repeat top center / 100% auto;
		.column1{
		   display: flex;
		    justify-content: space-between;
			margin-bottom: 50rpx;
		    .title{
		        font-size: 60rpx;
		        font-weight: bold;
		        color: #191919;
		        line-height: 62rpx;
		    }
		    .btn{
		        display: flex;
		        justify-content: space-between;
		        margin-top: 10rpx;
		        view{
		            width: 42rpx;
		            margin-left: 40rpx;
		            height: 42rpx;
		            background: url("/static/img/community/col1img1.png") no-repeat center / auto 100%;
		            position: relative;
		        }
		        view:nth-child(2){
		            background-image: url("/static/img/community/col1img2.png");
		            height: 40rpx;
		        }
		        view:nth-child(2).on{
		            &::before{
		                display: block;
		                content: "";
		                position: absolute;
		                right: -6rpx;
		                top: -4rpx;
		                width: 16rpx;
		                height: 16rpx;
		                border-radius: 50%;
		                background: #f10000;
		            }
		        }
		        view:nth-child(3){
		            background-image: url("/static/img/community/col1img3.png");
		        }
		    }
		}
		.column2{
		    margin-bottom: 40rpx;
		    .title{
		        margin-bottom: 30rpx;
		        display: flex;
		        justify-content: space-between;
		        .title1{
		            font-size: 36rpx;
		            color: #1c1c1c;
		            font-weight: bold;
		            line-height: 38rpx;
		        }
		        .btn{
		            font-size: 24rpx;
		            color: #707070;
		            line-height: 38rpx;
		            padding-right: 36rpx;
		            background: url("/static/img/community/btn.png") no-repeat center right / 14rpx;
		        }
		    }
		    .con{
		        overflow-x: scroll;
		        white-space: nowrap;
		        width: calc(100% + 30rpx);
		        .item{
		            display: inline-block;
		            width: 290rpx;
		            height: 100rpx;
		            border-radius: 20rpx;
		            background: #f0f2fb url("/static/img/community/bs.png") no-repeat top 23rpx left 18rpx / 25rpx;
		            padding: 20rpx 15rpx 0 55rpx;
		            box-sizing: border-box;
		            font-size: 24rpx;
		            font-weight: bold;
		            line-height: 29rpx;
		            color: #333333;
		            white-space: normal;
		            margin-right: 20rpx;
		            border: 1rpx solid #c0cae7;
		        }
		    }
		}
		.tab{
		    margin-bottom: 20rpx;
		    .fl{
		        position: relative;
		        margin-right: 60rpx;
		        &::before{
		            display: block;
		            content: "";
		            position: absolute;
		            left: 50%;
		            transform: translateX(-50%);
		            bottom: -3rpx;
		            width: 70rpx;
		            height: 10rpx;
		            background: #bdcbfd;
		            border-radius: 30px;
		            opacity: 0;
		            transition: all .4s ease;
		        }
		        view{
		            font-size: 36rpx;
		            color: #999999;
		            line-height: 38rpx;
		            position: relative;
		            z-index: 2;
		        }
		    }
		    .fl.hover{
		        &::before{
		            opacity: 1;
		        }
		        view{
		            color: #333333;
		            font-weight: bold;
		        }
		    }
		}
	}
    .content{
        padding: 0 30rpx 40rpx;
        background: #fff;
        // min-height: 100vh;
        box-sizing: border-box;
        .column3{
            
            .list{
				padding-top: 20rpx;
                .item{
                    margin-bottom: 30rpx;
                    .top{
                        margin-bottom: 20rpx;
                        overflow: hidden;
                        .pic{
                            width: 85rpx;
                            border-radius: 50%;
                            overflow: hidden;
                            margin-right: 20rpx;
							background: url("/static/img/mine/defalt.png") no-repeat center / cover;
                            &::before{
                                padding-top: 100%;
                            }
							image{
								object-fit: contain;
							}
							
                        }
                        .text{
                            overflow: hidden;
                            padding-top: 5rpx;
                            .name{
                                font-size: 30rpx;
                                color: #999999;
                                line-height: 32rpx;
                                margin-bottom: 15rpx;
                            }
                            .time{
                                font-size: 22rpx;
                                color: #959595;
                                line-height: 28rpx;
                                text{
                                    padding: 0 10rpx;
                                    background: #fadfde;
                                    border-radius: 30px;
                                    height: 28rpx;
                                    font-size: 18rpx;
                                    color: #ee7671;
                                    margin-right: 8rpx;
                                }
                            }
                        }
                    }
                    .bot{
                        margin-left: 105rpx;
                        border-bottom: 1rpx solid #e5e5e5;
                        padding-bottom: 30rpx;
                        .textC{
                            margin-bottom: 25rpx;
                            font-size: 28rpx;
                            line-height: 40rpx;
                            color: #000000;
                        }
                        .img{
                            overflow: hidden;
                            margin-bottom: 15rpx;
                            .pic{
                                display: inline-block;
                                margin: 0 10rpx 10rpx;
                                width: calc(33.3333% - 20rpx);
                                &::before{
                                    padding-top: 100%;
									
                                }
								image{
									object-fit: contain;
								}
                            }
                            .pic:nth-child(3){
                                margin-right: 0;
                            }
                        }
                        .info{
                            font-size: 28rpx;
                            color: #647fd6;
                            line-height: 34rpx;
                            margin-bottom: 25rpx;
                        }
                        .btn{
                            overflow: hidden;
                            view{
                                font-size: 24rpx;
                                line-height: 30rpx;
                                color: #aaaaaa;
                                margin-right: 42rpx;
                                padding-left: 50rpx;
                                background: url("/static/img/community/zan.png") no-repeat center left / 32rpx;
                                float: left;
                                display: inline;
                            }
                            view:nth-child(1).on{
                                background-image: url("/static/img/community/zanh.png");
                            }
                            view:nth-child(2){
                                background-image: url("/static/img/community/pl.png");
                            }
                        }
                    }
                    
                }
                .item:last-child .bot{
                    border-bottom: none;
                }
            }
        }
    }
</style>
